<template>
  <section class="intro-container">
    <h2 class="section-title">项目功能简介</h2>
    
    <!-- 项目介绍内容 -->
    <p class="intro-content">{{ intro }}</p>
    
    <!-- 功能列表 -->
    <ul class="feature-list">
      <li v-for="(feature, index) in features" :key="index" class="feature-item">
        {{ feature }}
      </li>
    </ul>
  </section>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 项目介绍内容 - 使用 ref
const intro = ref("本系统是为零售店设计的管理平台，旨在帮助店主高效管理店铺运营，包括库存、销售、客户和财务等方面。")

// 功能列表 - 使用 reactive
const features = reactive([
  '库存管理：实时跟踪商品库存',
  '销售跟踪：记录每笔交易数据',
  '客户关系管理：维护客户信息',
  '财务管理：收支记录与报表生成',
  '数据分析：销售趋势分析',
  '报表导出：支持多种格式导出'
])
</script>

<style scoped>
/* 容器样式 */
.intro-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.section-title {
  color: #3498db;
  margin-bottom: 15px;
}

/* 介绍内容样式 */
.intro-content {
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
}

/* 功能列表样式 */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  padding: 0;
}

/* 功能项样式 */
.feature-item {
  background-color: #e8f4fc;
  padding: 10px 15px;
  border-radius: 6px;
  flex: 1 1 calc(50% - 15px);
  min-width: 200px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.feature-item:hover {
  transform: translateY(-3px);
  background-color: #d4e9fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feature-item {
    flex: 1 1 100%;
  }
}
</style>